<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>工具中心</title>
  <script type="text/javascript" src="/static/Js/jQuery-3.5.1.js"></script>
  <script type="text/javascript" src="/static/Js/socket.io.js"></script>
  <script type="text/javascript" src="/static/Js/bootstrap/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/Js/GetUserParam.js"></script>
  <script type="text/javascript" src="/static/Js/UserFullNameWaterMark.js"></script>
  <script type="text/javascript" src="/static/Js/watermark.js"></script>

  <link rel="stylesheet" href="/static/Css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/Css/CommonStyles.css">

  <style>
    .imgSc{
      margin-top: 10px;
    }
    .cardText {
      background-color: white;
      margin-top: 1px;
      padding-right: 5px;
      padding-left: 5px;
      border: 1px gray solid;

      box-shadow: 0 3px 3px gray;
      border-radius: 25px;
    }
    .cardImg{
      margin-bottom: 5px;
      box-shadow: 0 3px 3px gray;
      border: 4px white solid;

    }
    .imgSc{
      text-align: center;
    }
    .btn{
      width: auto;
    }
    .QRCodeImg{
      width: 10em;
      height: 10em;
      margin: 0 auto;
      display: block;
    }
    .QRCodeSave{
      visibility: hidden;
    }
  </style>

</head>
<body id="bg_body" >
<div id="header"></div>
<div class="container" >
  <div class="row" >

    <div class="sidBar" style="padding: 0;margin-left: 0;" >
      <div style="background-color:rgba(255,255,255,0.8); height: calc(100vh - 66px);" id="messageSidBar_ul_div">
        <ul style="position: absolute;width: 100%" id="messageSidBar_ul">
          <li  onclick="gotoMessageCenter()"  class="card_Li" id="card_Li_00" style=" position: relative;margin-left: 4%;margin-top: 10%;width: 90%;height: 40px">
            <img class="messagePageIcon" id="messagePageIcon" src="/static/Img/PageImg/plane.png" alt="">
            <span class="messageCenterText" id="messageCenterText00">工具中心</span>
          </li>
        </ul>
        <ul style="position: absolute;width: 100%;margin-top: 100px" id="messageSidBar_ul02" >

        </ul>
      </div>
    </div>
    <div class="bigCard" style="padding-left: 10px;" >
      <div style="background-color: rgba(255,255,255,0.6);height: calc(100vh - 66px);">
        <ul style="position: absolute;width: 100%;z-index: 998" id="messageSidBar_ul001">
          <li class="card_Li card_Li0001" id="card_Li_0001" style=" position: relative;margin-left: 3%;margin-top: 10px;height: 40px">

            <span class="messageCenterText messageCenterText0001" id="messageCenterText0001" >工具数据分析</span>
          </li>
        </ul>
        <div style="overflow-y: auto;position: absolute;width: 99% ;height: 100%;margin-right: -5%"  >
          <ul style="position: relative;width: 100% ;height: 100%" id="messageSidBar_ul0001" >
            <!--<li class="NormalMessages" id="card_Li_00011" style=" position: relative;margin-left: 6%;margin-top: 10px;height: 40px">
                <span class="messageCenterText messageCenterText0001 NormalMessagesNum" id="messageCenterText00011" >1</span>
                <span class="messageCenterText messageCenterText0001 NormalMessagesTime NormalMessagesNum" id="messageCenterText00012" >1</span>
                <input type="text" style="border: none" readonly="readonly"  value="" class="messageCenterText messageCenterText0001 NormalMessagesText NormalMessagesNum" id="messageCenterText00013" >
                <button type="button" class="btn btn-success reLoadBtn" hidden><span style="margin-top: 1px">重新提交</span></button>
                <button type="button" class="btn btn-info detailedBtn"><span style="margin-top: 1px">详细</span></button>
                <button type="button" class="btn btn-danger"><span style="margin-top: 1px">删除</span></button>
            </li>-->
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>



<!-- Modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal fade startS_CModal" id="exampleModal" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">生成二维码</h5>
        <!--不允许使用‘X’按钮关闭-->
      </div>
      <div class="modal-body" id="modal-body">

        <textarea class="form-control" id="QRCodeContent" aria-label="With textarea"></textarea>

        <img id="QRCodeImg" class="QRCodeImg" src="/static/Img/PageImg/canva.png">
      </div>
      <div class="modal-footer">
        <button type="button"  id="QRCodeSave" class="btn btn-success QRCodeSave" onclick="QRCodeSave()">保存二维码</button>
        <button type="button" class="btn btn-success" onclick="QRCodeSubmit()">生成二维码</button>

        <button type="button" class="btn btn-secondary" onclick="S_CClose()">取消</button>

      </div>
      <div>
        <div class="progress" style="height: 2px;">
          <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  $(function () {
    UtilsCenter()
    UserFullNameWaterMark()
  })
  function getPageUrl() {
    return window.location.pathname
  }
  $.get('./HeadPage.html',function(data){
    $("#header").html(data)
  })
  $.get("./Toasts.html",function (data){
    $("#ToastsPage").html(data)
  })

  function UtilsCenter() {
    $.post("/UtilsCenter/getUtils",{},function (result) {
      if (result.flag) {
        let arr = result.data
        for (const arrElement of arr) {
          let str ='<div style="display: inline-block; ;margin-left: 6%;float: left" onclick="' + arrElement.sfun + '">'
                  + '<div class="imgSc">'
                  + '<img class="cardImg" style="opacity: .8;border-radius: 25px" src=' + arrElement.imgurl+ '  height="130" width="120">'
                  + '<br id="one1">'
                  + '<span class="cardText">'
                  + arrElement.utName
                  + '</span>'
                  + '</div>'
                  + '</div>'

          $("#messageSidBar_ul0001").append(str)

        }
      }else {
        $("#messageCenterText0001").text(result.errorMsg)
        $("#messageCenterText0001").css("color","orange")
        setTimeout(function (){
          $("#messageCenterText0001").text("系统消息")
          $("#messageCenterText0001").css("color","rgb(255,255,255)")
        },3000)
      }
    })
  }

  function QRCode() {
    $("#exampleModal").modal("show")
    $("#messageCenterText0001").attr("z-index")
  }



let QRCodeImg
  function QRCodeSubmit(){
    let content = document.getElementById("QRCodeContent").value
    /*$.post("/UtilsCenter/generate",{content:content},function (result){

    })*/
    $.ajax({
      url:"/UtilsCenter/generate",
      type:"post",
      dataType:"json",
      responseType: 'arraybuffer',
      data:{content:content},
      dataFilter:function (result) {
        let QRCode = look(result)
        QRCodeImg = QRCode
        document.getElementById("QRCodeImg").setAttribute("src",QRCode)
        if (result !== null) {
          document.getElementById("QRCodeSave").style.visibility = "visible"
        }
      }


    })
  }

  function S_CClose() {
    $("#modal-body").empty()
    $("#exampleModal").modal("hide")

    document.getElementById("QRCodeSave").style.visibility = "hidden"


  }

  function look(result){
    return "data:image/png;base64," + result;
  }


  function QRCodeSave() {


    let aLink = document.createElement('a');
    let blob = base64ToBlob(QRCodeImg); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = "系统生成二维码";
    aLink.href = URL.createObjectURL(blob);
    aLink.click();

  }

  const base64ToBlob = function (code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
      type: contentType
    });
  };

</script>
</body>
</html>